<!--
 * @Author: suJiuFu 15070021572@jq.com
 * @Date: 2022-10-08 15:34:26
 * @LastEditors: xiaodi 53527718@qq.com
 * @LastEditTime: 2025-11-11 21:52:49
 * @FilePath: \pc-cashier\public\order.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>存物单</title>
    <style>
      @page {
        margin: 0;
      }
      /**打印样式增加内边距*/
      @media print {
        .more-bill-card {
          width: 72.1mm;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          margin: 0;
          padding: 2mm;
          box-sizing: border-box;
        }
      }
      .more-bill-card .title {
        font-size: 20px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        text-align: center;
        color: #000000;
      }
      .handover-card-box {
        background: #ffffff;
        box-sizing: border-box;
        overflow-y: scroll;
        margin: 4px 0;
      }
      .flex-row {
        display: flex;
        flex-direction: row;
      }

      .flex-col {
        display: flex;
        flex-direction: column;
      }

      .justify-start {
        justify-content: flex-start;
      }

      .justify-center {
        justify-content: center;
      }

      .justify-end {
        justify-content: flex-end;
      }

      .justify-evenly {
        justify-content: space-evenly;
      }

      .justify-around {
        justify-content: space-around;
      }

      .justify-between {
        justify-content: space-between;
      }

      .items-start {
        align-items: flex-start;
      }

      .items-center {
        align-items: center;
      }

      .items-end {
        align-items: flex-end;
      }
      .text_15 {
        align-self: center;
        color: #353535;
      }
      .text_70 {
        margin-top: 7px;
        align-self: center;
      }
      .font_5 {
        font-size: 18px;
        font-family: PingFang SC Regular;
        color: #000;
      }
      .font_2 {
        font-size: 14px;
        font-family: PingFang SC Regular;
        color: #000;
      }
      .space-x-line {
        margin-top: 4px;
        width: 100%;
        background: #000;
        height: 1px;
      }
      .font_6 {
        font-size: 20px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        font-weight: 700;
      }
      .font_8 {
        font-size: 11px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        color: #000;
      }
      .font_9 {
        font-size: 11px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        color: #000;
      }
      .group_17 {
        margin-top: 20px;
      }
      .group_18 {
        margin-top: 4px;
      }
      .group_49 {
        margin-top: 10px;
        padding-top: 20px;
        border-top: solid 1px #e2e2e2;
      }
      .group_59 {
        margin-top: 10px;
        padding: 10px 0;
        border-top: solid 1px #e2e2e2;
        border-bottom: solid 1px #e2e2e2;
      }
      .group_60 {
        margin-top: 10px;
        padding-bottom: 10px;
        border-bottom: solid 1px #e2e2e2;
      }
      .group_62 {
        margin-top: 5px;
      }
      .group_65 {
        margin-top: 8px;
      }
      .group_30 {
        margin-top: 30px;
      }
      .group_64 {
        margin-top: 10px;
        padding: 10px 0;
        border-top: solid 1px #e2e2e2;
        border-bottom: solid 1px #e2e2e2;
      }
      .text_101 {
        margin-top: 12px;
        align-self: center;
      }
      .text_106 {
        margin-top: 20px;
        align-self: center;
      }
      .text-wrapper_16 {
        align-self: center;
        padding-top: 10px;
        margin-top: 10px;
        width: 100%;
        border-top: solid 1px #e2e2e2;
      }
      .dgrid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        text-align: center;
      }
      .dgrid > span:last-child {
        text-align: right;
      }

      .dgrid > span:first-child {
        text-align: left;
      }
      .dgrid3 {
        grid-template-columns: repeat(3, 1fr);
      }
      .dgrid4 {
        grid-template-columns: repeat(4, 1fr);
      }
      .more-bill-card .description {
        font-size: 14px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        /* font-weight: 700; */
        text-align: center;
        color: #000;
        margin: 4px 0;
      }
      .address-box {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        font-size: 11px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        text-align: center;
        color: #000000;
        line-height: 24px;
        margin-top: 70px;
      }
    </style>
  </head>

  <body>
    <div id="order">
      <div class="more-bill-card">
        <div class="flex-col" style="width: 100%">
          <h1 class="title">
            {{ fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.shopInfo.shop_name', '') }}
          </h1>
          <div class="description">【存物单】</div>
          <div class="flex-row justify-between items-center group_17">
            <div class="font_8">存物ID：</div>
            <div class="font_9">
              {{ fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.data.storage_id', '') }}
            </div>
          </div>
          <div class="flex-col">
            <div class="flex-row justify-between items-center group_18">
              <div class="font_8">物品名称：</div>
              <div class="font_9">
                {{ fetchObjectDeepAttrValue( workLogTicketDetailData, 'detail.data.item_name', '' )
                }}
              </div>
            </div>
            <div class="flex-row justify-between items-center group_18">
              <div class="font_8">数量：</div>
              <div class="font_9">
                {{ fetchObjectDeepAttrValue( workLogTicketDetailData, 'detail.data.num', '' ) }}
              </div>
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">物主姓名：</span>
              <span class="font_9"
                >{{ fetchObjectDeepAttrValue( workLogTicketDetailData, 'detail.data.user_name', '' )
                }}</span
              >
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">联系电话：</span>
              <span class="font_9"
                >{{ fetchObjectDeepAttrValue( workLogTicketDetailData, 'detail.data.mobile', '无' )
                }}</span
              >
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">存放时间：</span>
              <span class="font_9"
                >{{ fetchObjectDeepAttrValue( workLogTicketDetailData, 'detail.data.create_time', ''
                ) }}</span
              >
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">到期时间：</span>
              <span class="font_9"
                >{{ fetchObjectDeepAttrValue( workLogTicketDetailData, 'detail.data.expire_time', ''
                ) }}</span
              >
            </div>
            <div class="flex-row justify-between items-center group_18">
              <span class="font_8">备注：</span>
              <span class="font_9"
                >{{ fetchObjectDeepAttrValue( workLogTicketDetailData, 'detail.data.remark', '' )
                }}</span
              >
            </div>
          </div>
          <div class="address-box">
            <span>
              {{fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.shopInfo.address',
              '')}}</span
            >
            <span
              >订座电话：{{fetchObjectDeepAttrValue(workLogTicketDetailData,
              'detail.shopInfo.phone', '')}}</span
            >
            <span>技术支持：贵州一粒米科技有限公司</span>
           
          </div>
        </div>
      </div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
      var vm = new Vue({
        el: '#order',
        data: {
          workLogTicketDetailData: {}
        },
        mounted() {
          const { ipcRenderer } = require('electron')
          ipcRenderer.on('print-info', (event, printerName, mess, printerPage) => {
            this.workLogTicketDetailData = mess
            console.log(this.workLogTicketDetailData)
            // 获取内容高度并发送打印请求
            this.$nextTick(() => {
              const height = document.getElementById('order').offsetHeight
              ipcRenderer.send('printStart', printerName, height)
            })
          })
        },
        methods: {
          fetchObjectDeepAttrValue(parent, attrStr, defaultValue = false) {
            // 通过try-catch来捕捉访问对象失败情况--这是解决嵌套对象重要一步，这样就可以大胆访问对象--这也是封装原因
            // 不封装情况1.访问对象出错，try-catch捕捉到，在catch进行访问对象错误处理
            // 不封装情况2.如果在情况1下，又有多个属性需要进行这样处理，就会需要写多个catch处理，代码可观性上就比封装的差
            let resultValue
            try {
              const attrArray = attrStr.split('.')
              const currObj = attrStr ? parent[attrArray[0]] : parent // 不输入查找属性，默认返回整个对象
              resultValue =
                attrArray.length <= 1
                  ? currObj
                  : this.fetchObjectDeepAttrValue(currObj, attrArray.slice(1).join('.')) // 迭代访问对象
            } catch (e) {
              resultValue = undefined
            }
            if (resultValue) {
              return resultValue
            } else {
              return defaultValue
            }
            // fetchObjectDeepAttrValue应该在js逻辑层处理，HTML模板层只需渲染即可
            // 举个例子,这里的默认初始值是空字符串
            // this.address=fetchObjectDeepAttrValue(res, 'data.detail.detail.shopInfo.address','')
            // 注意事项：不要在HTML模板层写太多的判断，多了代码难以维护哦，或者写在computed和methods
          }
        }
      })
    </script>
  </body>
</html>
